<!--
 * @Author: cl
 * @Description: 成绩表
 * @Date: 2023-04-19 09:41:27
 * @LastEditTime: 2023-05-10 15:25:39
 * @FilePath: \vue3\src\views\nestjs\score\index.vue
 * @LastEditors: cl
-->

<template>
  <div class="wraps">
    <div>
      <el-input v-model="search.keyWord" style="width: 300px"></el-input>
      <el-button @click="init" style="margin-left: 10px">搜索</el-button>
      <el-button @click="openDialog" type="primary" style="margin-left: 10px"
        >添加</el-button
      >
    </div>
    <el-table border :data="tableData" style="width: 100%; margin-top: 30px">
      <el-table-column prop="id" label="id" />
      <el-table-column prop="student.no" label="学生编号" />
      <el-table-column prop="student.name" label="学生姓名" />
      <el-table-column prop="subject_id" label="科目">
        <template #default="scope">
          <span>{{ subjectList[scope.row.subject_id]?.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="achievement" label="成绩" />
      <el-table-column>
        <template #default="scope">
          <el-button @click="edit(scope.row)">编辑</el-button>
          <el-button @click="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog
    v-model="dialogVisible"
    title="新增成绩"
    width="400px"
    align-center="true"
    draggable
  >
    <el-form :model="form">
      <el-form-item prop="student_id" label="姓名">
        <el-select
          v-model="form.student_id"
          filterable
          remote
          reserve-keyword
          placeholder="请选择学生"
          :remote-method="getStudents"
        >
          <el-option
            v-for="item in students"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.name }}</span>
            <span
              style="
                float: right;
                color: var(--el-text-color-secondary);
                font-size: 13px;
              "
              >{{ item.no }}</span
            >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="subject_id" label="科目">
        <el-select
          v-model="form.subject_id"
          filterable
          reserve-keyword
          placeholder="请选择科目"
        >
          <el-option
            v-for="item in subjectList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.name }}</span>
            <span
              style="
                float: right;
                color: var(--el-text-color-secondary);
                font-size: 13px;
              "
              >{{ item.no }}</span
            >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="achievement" label="分数">
        <el-input
          v-model="form.achievement"
          placeholder="请输入分数"
          type="number"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">关闭</el-button>
        <el-button type="primary" @click="save"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import type { FormInstance } from "element-plus";
import { getList } from "../../../api/moudules/student";
import {
  getScoreList,
  getSubjectList,
  updateScore,
  addScore,
  delScore,
} from "@/api/moudules/score";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const stuId = route.query.id;
console.log(stuId);
console.log("参数:", route.params.id, route.params.age);

//搜索框
const search = reactive({
  keyWord: "",
  page: 1,
  pageSize: 10,
});
//表单
const form = reactive({
  id: "",
  subject_id: "",
  student_id: "",
  achievement: "",
});
//清空数据
const resetForm = reactive({ ...form });
//表格数据
const tableData = ref([]);
//学生选项
const students = ref([]);
//科目选项
const subjectList = ref([]);
//弹框开关
const dialogVisible = ref<boolean>(false);
const openDialog = () => {
  dialogVisible.value = true;
  Object.assign(form, resetForm);
};
//初始化表格数据
const init = async () => {
  let params = {};
  if (stuId) {
    params = { ...search, stuId };
  } else {
    params = { ...search };
  }
  const list = await getScoreList(params);
  console.log(list);
  tableData.value = list?.data ?? [];
};
const initSubjectList = async () => {
  const list = await getSubjectList(search);
  subjectList.value = list?.data ?? [];
};
init();
initSubjectList();
//保存 和修改 表格数据
const save = async () => {
  if (form.id) {
    await updateScore(form);
  } else {
    await addScore(form);
  }

  close();
  init();
};
//删除表格数据
const deleteRow = async (row) => {
  await delScore({ id: row.id });
  init();
};
//获取 详情
const edit = (row: any) => {
  dialogVisible.value = true;
  Object.assign(form, row);
};
//关闭弹框
const close = () => {
  dialogVisible.value = false;
};
const lookScoreRow = (row: any) => {
  router.push({
    name: "score",
    params: { row: JSON.parse(JSON.stringify(row)) },
  });
};
const getStudents = async (keyWord: string) => {
  console.log(keyWord);
  const list = await getList({ keyWord });
  students.value = list?.data ?? [];
};
</script>

<style lang="scss">
html,
body {
  background: #ccc;
}

.wraps {
  height: 100vh;
  padding: 30px;
}
</style>
